<template>
  <div class="page">
    <van-nav-bar title="业务员备件库" left-arrow @click-left="$router.go(-1)"/>
    <top-search @search="searchFunc" v-model="search.searchValue" bgcolor="#fff"></top-search>
    
    <van-list class="page-content" v-model="page.loading" :finished="page.finished" finished-text="没有更多了" @load="getList">
      <div class="list-item" v-for="(item, index) in list" :key="index">
        <div class="list-group flex-row" style="padding-top: 0.25rem; padding-bottom: 0.25rem;">
          <div class="flex-row">
            <img :src="'./img/logo.png'" style="width: 0.6rem; height: 0.6rem; border-radius: 50%;"/>
            <span class="font-black" style="font-size: 14px; margin-left: 0.28rem;">{{ item.salesmanName || '无昵称' }}({{ item.salesmanId }})</span>
          </div>
          <!-- <span @click="detail.showBlank(item.userId)" class="font-blue" style="font-size: 14px;">统计详情</span> -->
        </div>
        <div class="list-group justify">
          <div class="list-row">
            <span class="label-text">机柜数</span>
            <span class="font-red">{{ item.terminalCount }}</span>
          </div>
          <div class="list-row">
            <span class="label-text">充电宝数</span>
            <span class="font-blue">{{ item.chargerCount }}</span>
          </div>
        </div>
      </div>
    </van-list>

    <van-popup v-model="detail.show" position="bottom" :style="{ height: '100%' }">
    </van-popup>
  </div>
</template>

<script>
import addRole from './AddRole.vue';
export default {
  components: { addRole },
  data() {
    return {
      search: {
        searchValue: ''
      },

      page: {
        page: 1,
        size: 10,
        loading: false,
        finished: false
      },

      list: [],

      detail: {
        show: false,
        onClose: () => {
          this.user.show = false;
        },
        showBlank: (userId) => {
          this.$axios.get('/api/roleController/getUserRoleInfo', { 
            userId
          }).then(res => {
            this.user.show = true;
            this.$nextTick(() => {
              this.$refs.addRole.setValue(res);
            });
          });
        }
      }
    };
  },
  methods: {
    getList() {
      let sPage = JSON.parse(JSON.stringify(this.page));
      let page = sPage.page, size = sPage.size;
      this.page.loading = true;
      
      let search = JSON.parse(JSON.stringify(this.search));
      let query = { page, size };
      if (search.searchValue) query.content = search.searchValue;

      this.$axios.get('/api/bjk/bjkCount', query).then(res => {
        let json = res || {}; 
        let list = json.list || [];
        this.list.push( ...list );
        let finished = json.isLastPage ? true : false;
        this.page = { ...sPage, page: sPage.page + 1, loading: false, finished };
      }).catch(() => {
        this.page = { ...sPage, loading: false, finished: true };
      });
    },
    searchFunc() {
      this.page = { page: 1, size: 10, loading: false, finished: false };
      this.list = [];
      this.getList();
    },
  },
  mounted() { 
  },
};
</script>